<template>
    <div class="contain">
        <div class="left">
            <div class="top">
                 <el-avatar :size="50" icon="el-icon-user-solid"></el-avatar>
                 <span class="top-item">用户名</span>
                 <span class="top-item">认证教师</span>
            </div>
            <div class="bottom">
                <el-menu
                default-active="1"
                class="el-menu-vertical-demo">
                <el-menu-item 
                v-for="item in menu" 
                index="item.id" 
                :key="item.id"
                @click="changeRoute(item.route ,item.title)"
                >
                <span slot="title">{{item.title}}</span>
                </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="right">
            <div class="right_tit">
                <span class="title">{{currentTitle}}</span>
            </div>
            <div class="right-main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            currentTitle: '个人资料',
            menu: [
                {
                    id: 0,
                    title: '个人资料',
                    route: '/userinfo'
                },
                {
                    id: 2,
                    title: '教师资格认证',
                    route: '/authen'
                }
            ]
        }
    },
    methods: {
        changeRoute (route ,title) {
            this.currentTitle = title
            this.$router.push(route)
        }
    }
}
</script>
<style scoped>
.contain {
    width: 94%;
    min-height: 300px;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
}
.contain .left {
    width: 26%;
    display: flex;
    flex-direction: column;
}
.left .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 200px;
    background: #ffffff;
    margin-bottom: 20px;
    padding: 30px;
}
.top .top-item {
    line-height: 30px;
    color: #1a1818;
}
.el-avatar {
  margin: 0 auto;
}
.left .bottom {
    width: 100%;
    height: 400px;
    background: #ffffff;
}
.right {
    width: 70%;
    min-height: 800px;
    background: #ffffff;
    margin-left: 20px;
}
 .right .right_tit {
    height: 50px;
    text-align: left;
    margin-left: 20px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
}
.title {
    padding: 0 20px;
    line-height: 50px;
    display: inline-block;
    border-bottom: 2px solid blue;
}
</style>